<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;

        }

        .el-table .el-table__cell {
            padding: 0;
        }

        .el-table .cell {
            white-space: nowrap; /*设置内容不换行*/
            text-overflow: ellipsis; /*有超出显示范围的文本时显示...*/
        }

        .p_img:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x偏移值 y偏移值 浓度(值越大越模糊) 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }

        el-table {
            height: 20px;
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="100px" style="font-size: 18px">
            <div style="width: 1500px;margin: 0 auto">
                <img src="imgs/logo.jpg" style="width: 150px;vertical-align: middle" alt="">
                <a href="/index.html">首页</a> <i class="el-icon-s-home"></i>
                <el-divider direction="vertical">
                </el-divider>
                <a href="/index.html">全部商品</a> <i class="el-icon-s-goods"></i>
                <el-divider direction="vertical"></el-divider>
                <a href="">尝鲜装</a> <i class="el-icon-cherry"></i>
                <el-divider direction="vertical"></el-divider>
                <a href="/orders.html">我的订单 </a> <i class="el-icon-s-operation"></i>
                <el-divider direction="vertical"></el-divider>
                <a href="">帮助</a> <i class="el-icon-phone"></i>
                <hr>
            </div>
        </el-header>
    </el-container>
    <template>
        <el-table :data="tableData" border style="width: 70% ;margin: auto">
            <!--            <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>-->
            <el-table-column prop="name" label="名称" width="300" align="center"></el-table-column>
            <el-table-column prop="price" label="单价(元)" header-align="center"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="weight" label="重量(斤)" align="center"></el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                               @click="handupdateWeight(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                               @click="openDeleteConfirm(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        修改斤数-->
        <el-dialog title="修改斤数" :visible.sync="updateWeight">
            <el-form :model="item">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input :value="item.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input :value="item.price"></el-input>
                </el-form-item>
                <el-form-item label="斤数" :label-width="formLabelWidth">
                    <el-input v-model="item.weight"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateWeight = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 弹出的编辑相册的对话框 -->
        <el-dialog title="请确认订单并支付" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm">
                <el-form-item label="用户ID" :label-width="formLabelWidth">
                    <el-input :value="ruleForm.userId"></el-input>
                </el-form-item>
                <el-form-item label="总价格" :label-width="formLabelWidth">
                    <el-input :value="ruleForm.totalPrice"></el-input>
                </el-form-item>
                <el-form-item label="总斤数" :label-width="formLabelWidth">
                    <el-input :value="ruleForm.totalWeight"></el-input>
                </el-form-item>
                <el-form-item label="收件人" :label-width="formLabelWidth">
                    <el-input v-model="addressList.consignee"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.deliveryAddress" placeholder="请输入地址"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit()">确 定</el-button>
            </div>
        </el-dialog>

        <a href="index.html" style="margin-left: 10px;color: #5FB878;top: 3px">继续购买</a>

        <hr>
        <a href="javascript:void(0)" style="margin-left: 1200px" type="success" @click="getTotal()">去结算></a>
    </template>


</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                addressList:[{
                    id:'2',
                    userId: '2',
                    location: '吴江',
                    consignee: '李四',
                    phone: "10000",
                    isDefault: '1',
                },],
                currentAddress:{},
                num: 1,
                tableData: [],
                dialogFormVisible: false,
                updateWeight: false,
                item: '',
                ruleForm: {
                    userId: '',
                    itemId: '',
                    totalPrice: '',
                    totalWeight: '',
                    deliveryAddress: '',
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            //去结算
            getTotal() {
                //获取总价格和总斤数
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post("/car/total/Price-weight").then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody.data);
                    if (responseBody.state == 20000) {
                        this.ruleForm = responseBody.data;
                        this.dialogFormVisible=true;
                        // this.buy();
                        // this.dialogFormVisible = true;
                    } else {
                        alert("状态错误");
                        this.selectCarList();
                    }
                });
            },
            buy() {
                let message = '您正在购买【' + this.ruleForm.userId + '-' + this.ruleForm.totalPrice + '/' + this.ruleForm.totalWeight;
                console.log(message);
                let url = 'http://localhost:8080/address/?userId=' + this.ruleForm.userId;
                axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .get(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.addressList = responseBody.data;
                    }else {
                        this.$message.error(responseBody.message);
                        this.dialogFormVisible = true;
                        this.selectCarList();
                    }
                })
            },
            submitEdit() {
                let url = 'http://localhost:8080/orders/add-order';
                console.log('url = ' + url);
                //let formData = this.qs.stringify(this.ruleForm);
                axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .post(url, this.ruleForm).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '您已下单成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.selectCarList();
                    } else if (responseBody.state == 40900) {
                        this.$message.error(responseBody.message);
                    } else {
                        this.$message.error(responseBody.message);
                        this.dialogFormVisible = true;
                        this.selectCarList();
                    }
                });
            },
            handupdateWeight(item) {
                this.updateWeight = true;
                this.item = item;
            },
            handleEdit() {
                let message = '您正在尝试编辑【' + this.item.name + '】的商品详情……';
                console.log(message);
                let url = 'http://localhost:8080/car/update';
                console.log(url);
                axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .post(url, this.item).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '您已修改成功！',
                            type: 'success'
                        });
                        this.updateWeight = false;
                        this.selectCarList();
                    } else {
                        this.$message.error(responseBody.message);
                        this.selectCarList();
                    }
                });
            },
            handleDelete(item) {
                let url = 'http://localhost:8080/car/' + item.id + '/delete';
                console.log('url = ' + url);
                axios
                    .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 20000 || responseBody.state == 40400) {
                        this.selectCarList();
                    }
                });
            },
            openDeleteConfirm(item) {
                let message = '此操作将永久删除【' + item.name + '】商品，是否继续？';
                alert(message);
                this.handleDelete(item);
            },
            selectCarList() {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/car").then(function (res) {
                    let responseBody = res.data;
                    if (responseBody.state == 20000) {
                        v.tableData = responseBody.data;
                    }
                })
            }

        },
        mounted: function () {
            if (localStorage.getItem('jwt') == null) {
                alert('您么有登录，请先登录');
                location.href = '/login.html';
            } else {
                this.selectCarList();
            }
        },
    })
</script>
</html>
